<!--聊天对话框-->
<div class="msg-window" id="msgWindow" ms-controller="chat">
    <!--头部-->
    <div class="msg-header ">
        消息列表
        <button class="close">
            <span>x</span>
        </button>
    </div>
    <!--主体-->
    <div class="msg-container box-row">
        <!--左侧人员列表-->
        <div class="left-scroll-content  ">
            <ul class="msg-list">
                <li class="msg-list-item" ms-repeat="msgList">
                    <a href="#" ms-on-mouseover="hovering($index)" ms-on-mouseout="hovering($index)">{{el.name}}
                        <span ms-class="red-circle" ms-if="el.notRead"></span>
                    </a>
                    <button ms-class="close close-icon" ms-if="el.flag">
                        <span>x</span>
                    </button>
                </li>

            </ul>
        </div>
        <!--右侧内容区-->
        <div class="right-content ">
            <!--右侧显示的消息列表-->
            <div class="msg-scroll-content" >
                <div class="content-list " style="display:none;">
                    <div class="content-item ">
                        <span> 2014.1.20</span>

                        <p>通知通知通知通知1</p>
                    </div>
                    <div class="  content-item ">
                        <span> 2013.1.8</span>

                        <p>通知通知通知通知通知通知通知通知通知通知通
                            知通知通知通知通知通知2通知通知通知通知通知
                            通知通知通知2通知通知通知通知通知通知通知通知22</p>
                    </div>
                    <div class=" content-item  ">
                        <span> 2015.1.5</span>

                        <p>通知通知通知通知3</p>
                    </div>
                </div>
            </div>
             <!--右侧显示的聊天区域-->
            <div class="chat-content" >
                <div class="chat-scroll-content">
                    <div class="chat-list">
                        <!--对方发送的信息-->
                        <div class="item box-row">
                            <div class="item-face  ">
                                <img src="./src/images/test2.png">
                            </div>
                            <div class="item-content box-col">
                                <div class="item-info">
                                    <span>用户名1</span>
                                    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                                    <span>2015-1-1</span>
                                </div>
                                <div class="item-detail">
                                    阿凡达》让很多人都记住了avatar这个词
                                    。其实,avatar并不是导演造的一个词,
                                    它在印度教中指“圣人的
                                </div>
                            </div>
                        </div>
                        <!--对方发送的信息-->
                        <div class="item box-row">
                            <div class="item-face ">
                                <img src="./src/images/test2.png">
                            </div>
                            <div class="item-content box-col">
                                <div class="item-info">
                                    <span>用户名1</span>
                                    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                                    <span> 2015-1-1</span>
                                </div>
                                <div class="item-detail">
                                    阿凡达》让很多人都记住了avatar这个词
                                    。其实,avatar并不是导演造的一个词,
                                    它在印度教中指“圣人的
                                </div>
                            </div>
                        </div>
                        <!--自己发的信息-->
                        <div class="item box-row-rev">
                            <div class="item-face ">
                                <img src="./src/images/test2.png">
                            </div>
                            <div class="item-content   box-col">
                                <div class="item-info box-row-rev">
                                    <span>用户名1</span>
                                    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                                    <span> 2015-1-1</span>
                                </div>
                                <div class="item-detail">
                                    阿凡达》让很多人都记住了avatar这个词
                                    。其实,avatar并不是导演造的一个词,
                                    它在印度教中指“圣人的
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <hr/>
                <!--发送区域-->
                <div class="send-msg row">
                    <div class="col-md-10">
                        <textarea class="form-control " style="resize: none;"></textarea>

                    </div>
                    <div class="col-md-2">
                        <btn class="send-btn btn btn-primary ">发送</btn>

                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
